<template>
  <div style="width: 100%;height: 500px;padding-top:0;margin: 0 ">
    <div class="pageheader">
      <div class="pageheader-1">
        <i class="el-icon-user-solid"></i><label>用户管理</label>
      </div>
      <div style="height: 100%;position: absolute;top: 20px;left: 350px">
        <el-form :model="input" ref="key">
        <el-input
          style="width: 200px;position: absolute;top: 5px;left: 0px"
          size="small"
          placeholder="搜索"
          suffix-icon="el-icon-search"
          maxlength="20"
          v-model="input.input3">
        </el-input>
        <el-button type="primary" @click="find('input')" class="searchbtn" plain>查询</el-button>
        </el-form>
        <el-button type="primary" v-show="list[0].children[0].showadd" @click="openadd=true" class="add">添加</el-button>
      </div>

    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%;height: 80%">

      <el-table-column
        prop="userid"
        label="账号">
      </el-table-column>
      <el-table-column
        prop="pwd"
        label="密码">
      </el-table-column>
      <el-table-column
        prop="username"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作">
        <template  slot-scope="scope">
          <el-button type="primary" v-show="list[0].children[0].showedit" @click="edit(scope.row)">修改</el-button>
          <el-button type="danger" v-show="list[0].children[0].showdelete" @click="opendelete(scope.row)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        page-size="5"
        :total="total"
        @current-change="page">
      </el-pagination>
    </div>
    <!--添加 -->
    <el-dialog title="添加"  @close="this.reload" :visible.sync="openadd">
      <el-form :rules="rules" :model="userform" ref="addform">
        <el-form-item prop="userid" label="账号" :label-width="width">
          <el-input v-model="userform.userid" placeholder="请输入账号" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="pwd" label="密码" :label-width="width">
          <el-input type="password" v-model="userform.pwd" placeholder="请输入密码" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="username" label="姓名" :label-width="width">
          <el-input v-model="userform.username" placeholder="请输入姓名"  autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="status" label="状态" :label-width="width">
          <el-select v-model="userform.status" placeholder="请选择">
              <el-option label="启用" value="启用"></el-option>
            <el-option label="禁用" value="禁用"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item  label="角色" :label-width="width">
          <el-checkbox-group :key="item" v-for=" item in role" v-model="role1">
            <el-checkbox :label="item.rolename" ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary"  @click="add ('addform')">添加</el-button>
        <el-button @click="this.reload">返回</el-button>
      </div>
    </el-dialog>
    <!--修改 -->
    <el-dialog title="修改" @close="this.reload" :visible.sync="openedit">
      <el-form :rules="rules" :model="userform" ref="openedit">
        <el-form-item prop="userid" label="账号" :label-width="width">
          <el-input :disabled="true" v-model="userform.userid" placeholder="请输入账号" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="pwd" label="密码" :label-width="width">
          <el-input type="password" v-model="userform.pwd" placeholder="请输入密码" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="username" label="姓名" :label-width="width">
          <el-input v-model="userform.username" placeholder="请输入姓名"  autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="statu" label="状态" :label-width="width">
          <el-select v-model="userform.status" placeholder="请选择">
            <el-option label="启用" value="启用"></el-option>
            <el-option label="禁用" value="禁用"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色" :label-width="width">
          <el-checkbox-group :key="item" v-for=" item in role" v-model="role1">
            <el-checkbox :label="item.rolename" ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editaction('openedit')">保存</el-button>
        <el-button @click="this.reload">返回</el-button>
      </div>
    </el-dialog>
    <!--提示 -->
    <el-dialog
      title="提示"
      :visible.sync="openelete"
      width="30%"
      center>
      <span>你确定要删除该条记录吗?</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="openelete = false">取 消</el-button>
    <el-button type="primary" @click="deleted" >确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  inject: ['reload', 'list'],
  methods: {
    // 查询功能
    find (key) {
      const _this = this
      if (this.input.input3 !== '') {
        axios.get('http://localhost:8088/findByUserid/' + this.input.input3).then(function (resp) {
          _this.tableData = resp.data
          _this.total = 1
        })
      } else {
        this.reload()
      }
    },
    // 添加功能
    add1 (id) {
      const _this = this
      _this.num = this.role1.pop()
      if (_this.num !== null) {
        if (_this.num !== undefined) {
          axios.post('http://localhost:8088/saveUserAndRole/' + id + '/' + _this.num).then(function (resp) {
            _this.add1(id)
          })
        }
      } else {
        this.add1(id)
      }
    },
    add (addform) {
      const _this = this
      this.$refs[addform].validate((valid) => {
        if (valid) {
          axios.get('http://localhost:8088/findByUseridOne/' + this.userform.userid).then(function (resp) {
            _this.role2 = resp.data
            if (_this.role2 !== '') {
              alert('账号已存在，请重新输入！')
            } else {
              _this.add1(_this.userform.userid)
              axios.post('http://localhost:8088/saveUser', _this.userform).then(function (resp) {
                _this.$message({
                  message: '操作成功',
                  type: 'success'
                })
                _this.reload()
              })
            }
          })
        }
      })
    },
    add2 (addform) {
      const _this = this
      this.$refs[addform].validate((valid) => {
        if (valid) {
          _this.add1(_this.userform.userid)
          axios.post('http://localhost:8088/saveUser', _this.userform).then(function (resp) {
            _this.$message({
              message: '操作成功',
              type: 'success'
            })
            _this.reload()
          })
        }
      })
    },
    // 修改
    edit (row) {
      const _this = this
      this.userform = row
      axios.post('http://localhost:8088/findByUseridU/' + row.userid).then(function (resp) {
        _this.role1 = resp.data
      })
      this.openedit = true
    },
    editaction (openedit) {
      this.deleteout()
      this.add2(openedit)
    },
    // 删除
    opendelete (row) {
      this.openelete = true
      this.userform = row
    },
    deleted () {
      axios.post('http://localhost:8088/deleteUser/' + this.userform.userid).then(function (resp) {
      })
      this.deleteout()
      this.reload()
    },
    deleteout () {
      axios.post('http://localhost:8088/deleteUserU/' + this.userform.userid).then(function (resp) {
      })
    },
    // 分页模块
    page (currentpage) {
      const _this = this
      axios.get('http://localhost:8088/findUserAll/' + currentpage + '/5').then(function (resp) {
        console.log(resp.data)
        _this.tableData = resp.data.content
        _this.total = resp.data.totalElements
      })
    }
  },
  // 接受后台数据
  created () {
    const _this = this
    axios.get('http://localhost:8088/findUserAll/1/5').then(function (resp) {
      _this.tableData = resp.data.content
      _this.total = resp.data.totalElements
    })
    axios.get('http://localhost:8088/findRoleAll').then(function (resp) {
      _this.role = resp.data
    })
  },
  //  数据绑定
  data () {
    return {
      width: '60px',
      total: null,
      input: {
        input3: ''
      },
      num: '',
      index: '1',
      openadd: false,
      tableData: null,
      role: null,
      role1: [
      ],
      role2: null,
      userform: {
        id: '',
        userid: '',
        username: '',
        pwd: '',
        status: ''
      },
      openelete: false,
      openedit: false,
      deleteid: '',
      rules: {
        userid: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>
